<template>
    <div class="sell_con" v-show="boxShow2" id="sell_con">
        <div class="shadowBox" @click="btnOk2('hidden')"></div>
        <div class="recallBox">
            <div class="recallBoxTit">撤回提示</div>
            <!-- <div class="pop_info_center " @click="goCouponDetl(param)"> -->
            <div class="pop_info_center drop_down">
                <div class="cardBg1">
                    <div class="bgLine"><img src="../../images/cardBg.jpg"></div>
                    <div class="cardBg2">
                        <div class="card_tit">
                            <span class="right">有效期：{{param.validatyEnd | strDate(3)}}</span>
                            <p>{{param.mchtName}}</p>
                        </div>
                        <div class="couponDiv" :class="{'coupon_yellow':param.type=='cash','coupon_green':param.type=='rebate','coupon_blue':param.type=='voucher','coupon_orange':param.type=='present','coupon_purple':param.type=='ticket'}">
                            <div class="_num" :class="{'coupon_color_y':param.type=='cash','coupon_color_g':param.type=='rebate','coupon_color_b':param.type=='voucher','coupon_color_o':param.type=='present','coupon_color_p':param.type=='ticket'}">Coupon</div>
                            <div class="_num_price">
                                <coupon-num :num="param.denomination" :type="param.type"></coupon-num>
                            </div>
                            <div class="coupon_type">{{param.type | couponTp}}</div>
                        </div>
                        <div class="card_info">
                            <div class="card_name">
                                {{param.name}}
                            </div>
                            <div class="pop_info_price">
                                <span>{{param.valuation}}</span>芸券
                            </div>
                            <div class="coupon_info_item">
                                <p class="star_con">
                                    <star :couponComScore="param.comScore"></star>
                                </p>
                                <p class="info_pad">{{param.comNum}}条</p>
                            </div>
                            <div class="clear"></div>
                            <div class="coupon_info_item color_gray">
                                已出售{{param.soldnum}}   已使用{{param.usednum}}
                            </div>
                        </div>
                    </div>
                    <div class="pop_info_bot"  @click="xzShow">
                        <i :class="xuzhi ? 'icon iconfont icon-iconfontunfold' : 'icon iconfont icon-down'"></i>使用说明
                    </div>
                    <div class="rule_all" id="ruleAll">
                        <div class="coupon_dtl_instr">
                            <ul id="rule">
                                <li v-if="scpoe"><span>{{scpoe + extra}}</span></li>
                                <li><span>有效期{{param.validatyBegin|strDate(3)}}至{{param.validatyEnd|strDate(3)}}</span></li>
                                <li v-if="param.disableDate"><span>{{param.disableDate|businessDay}}不可以使用</span></li>
                                <li><span>使用时间：{{param.useTime|timeAnalysis}}</span></li>
                                <li v-if="param.restricted"><span>满{{param.restricted}}元可使用</span></li>
                            </ul>
                        </div>
                        <div class="coupon_dtl_instr2" id="ruleT">
                            <ul>
                                <li v-if="diejia"><i class="iconfont icon-kediejiashiyong-"></i>可叠加使用{{param.useNum}}张</li>
                                <li v-if="gongtong"><i class="iconfont icon-keyuqitadianziquangongtongshiyong-"></i>可与其他券同使用</li>
                                <li><i class="iconfont icon-buzhaolingbuduixian-"></i>不找零不兑现</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div id="inst" class="recallInfo"><span class="right">挂单数量：{{param.num}}张</span>挂单时间：{{param.validatyBegin | strDate(1)}}</div>
            <div class="recallNum">
                <div class="recallNumR">
                    <p @click="reduce" class="recallMinus" >-</p>
                    <input @keypress="keyPress" type="number" class="recallIpt" v-model="recallNum">
                    <p @click="add" class="recallAdd">+</p>
                </div>
                撤回张数：
            </div>
        </div>
        <div class="pop_btn">
            <button v-on:click="btnOk2()">确 认</button>
        </div>
    </div>
</template>
<script>
    import getData from '../../service/getData.js'
    import getData4 from '../../service/getData4.js';
    import star from './star.vue'
    import couponNum from './couponNum.vue'
    import {mapState} from 'vuex'
    import { Toast,Indicator} from 'mint-ui'
    import {Storage} from 'src/utils/storage.js'

    export default {
        data:function(){
            return{
                recallNum:1,
                xuzhi:false,
                scpoe:'',
                extra:'',
                diejia:'',
                gongtong:''

            }
        },
        created:function(){
            this.recallNum = 1;
        },
        components:{
            star,
            couponNum
        },
        props:["param","boxShow2"],
        computed:{
            ...mapState({
                userInfo:state => state.user.userInfo,
                myCoupon:state => state.center.myCoupon,
            })
        },
        watch:{
            param(){
                let me = this;
                getData4.getDishType({mchtId:me.param.mchtId}).then(data =>{
                    var scpoeList = data.content.lowTypeNameList
                    me.diejia = me.param.useRule.indexOf("M") >=0;
                    me.gongtong = me.param.useRule.indexOf("D") >=0;
                    // me.userTime = rep.content.useTime.split(",").join(" ");
                    if(me.param.scpoe.indexOf("T") >=0){
                        me.extra = "不可用"
                    }else{
                        me.extra = "可用"
                    }

                    //获取商户可用或非可用菜类列表
                    let scpoe = me.param.scpoe.substr(1,me.param.scpoe.length+1).split(",")
                    let type =[];
                    scpoe.find(data => {
                        scpoeList.forEach(value => {
                            if(value.typeId == data){
                                type.push(value.typeName);
                            }
                        })
                        me.scpoe = type.join("、")
                    })
                });

            }
        },
        filters:{
            timeAnalysis:function(value) {
                if(!value){
                    return;
                };
                if (value.indexOf('null')>0) {
                    value=value.substring(0,value.indexOf(','));
                }
                return value
            }
        },
        methods:{
            goCouponDetl(params){
                var me=this;
                Storage.set("couponInfo",params);
                // this.$router.push({name:'couponDetail',query:{type:'noExchange'}});
                this.$router.push({
                  name:'couDetail',
                  query: {
                    type:'noExchange',
                    couponId: params.couponId,
                    mchtId: params.mchtId,
                    seq: params.seqNo||'',
                    usrId: params.usrId,
                    usrPicId: ''
                  }
                });

            },
            btnOk2:function(type){///撤回
                if(type == 'hidden'){
                    this.recallNum = 1;
                    this.$emit("btnOk2","hidden");
                    return
                }
                if(this.recallNum <= 0){
                    Toast({
                        message: '请填写正确的撤回数量',
                        duration: 1000
                    });
                    return
                }
                if(this.param.num < this.recallNum){
                    Toast({
                        message: '撤回张数大于出售张数',
                        duration: 1000
                    });
                    return
                }
                // Indicator.open('加载中...');
                this.$store.commit('changeState', true)
                let me = this;
                getData.recallOrder({'method':'post',seqNo:me.param.seqNo,data:{cancelNum:parseInt(me.recallNum),sellNum:parseInt(me.param.num)}},me.userInfo.usrId).then(function(rep){
                    if(rep.respCode == '00'){
                        setTimeout(function() {
                            Toast({
                                message: '操作成功',
                                duration: 2000
                            });
                        },200);

                        setTimeout(function(){
                            me.$emit("btnOk2");
                            me.$store.commit({
                                type:'UP_DATA_LIST',
                                array:me.myCoupon,
                                index:me.param.index
                            });
                            me.recallNum = 1;
                        },1200);
                    }else{
                        Toast({
                            message: rep.errorInfo,
                            duration: 1000
                        });
                        setTimeout(function(){
                            me.$emit("btnOk2");
                        },800)

                    }
                })
            },
            xzShow:function(){
                var allHeight=document.getElementById('rule').offsetHeight+document.getElementById('ruleT').offsetHeight;
                if (!this.xuzhi) {
                    this.xuzhi=true;
                    document.getElementById('ruleAll').style.opacity=1;
                    document.getElementById('inst').style.marginTop=allHeight+5+'px';
                    document.getElementById('sell_con').style.paddingTop=5+'%';
                }else{
                    this.xuzhi=false;
                    document.getElementById('ruleAll').style.opacity=0;
                    document.getElementById('inst').style.marginTop=0;
                    document.getElementById('sell_con').style.paddingTop=20+'%';
                }

            },
            add:function(){
                if(this.param.num == this.recallNum){
                    return
                }
                this.recallNum ++;
            },
            reduce:function(){
                if(this.recallNum <= 1){
                    return
                }
                this.recallNum--;
            },
            recallEvent:function(str){
                if(str == 'minus'){
                    if(this.recallNum <= 1){
                        return
                    }
                    this.recallNum--;
                }else if(str == 'add'){
                    if(this.param.num == this.recallNum){
                        return
                    }
                    this.recallNum ++;
                }
            },
            //只能输入数字，禁止输入点
            keyPress() {
                let keyCode = event.keyCode;
                if (keyCode >= 48 && keyCode <= 57) {
                    event.returnValue = true;
                } else {
                    event.returnValue = false;
                }
            }
        }
    }
</script>
<style>
    .recallBox{width: 80%;background:linear-gradient(35deg, #ec4e8a, #f95a7c);min-height: 16rem;border-radius: .2rem;}
    .recallBoxTit{height: 4rem;line-height: 4rem;color:#fff;text-align: center;font-size:1.2rem;}
    .recallInfo{border-bottom: 1px solid #f3749e;font-size:1rem;color:#fff;height: 3rem;line-height: 3rem;margin: 0 .667rem;margin-top: 1rem;}
    .recallNum{height: 4rem;line-height: 4rem;margin: 0 .667rem;color:#fff;font-size:1.2rem;z-index: 10;position: relative;}
    .recallNumR{float: right;position:absolute;top:50%;right:0;transform: translateY(-50%);}
    .recallNumR p{width: 2rem;height: 2rem;font-size:1rem;line-height:2rem;background: rgba(255,255,255,.5);color:#fff;text-align: center;float:left;border-radius: .2rem;}
    .recallIpt{width: 3rem;text-align: center;height: 2rem;background: rgba(255,255,255,.5);border-radius: .2rem;float:left;color:#fff;margin:0 0.4rem;}
</style>
